<template>
  <div class="dropdown-details">
    <h2>Dropdown下拉菜单</h2>
    <p>向下弹出的列表。</p>
    <h4>何时使用</h4>
    <p>当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。</p>
    <h4>演示</h4>
    <dropdown title="点击试试！！！" style="background: rgba(0,0,0,0.2);"></dropdown>
    <h4 class="mt-4">代码</h4>
    <pre>
      {{html}}
    </pre>
    <h4>Dropdown 属性和事件</h4>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">属性或事件</th>
          <th scope="col">类型</th>
          <th scope="col">默认</th>
          <th scope="col">说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">title</th>
          <td>string</td>
          <td>-</td>
          <td>Dropdown 中的标题文本</td>
        </tr>
        <tr>
          <th scope="row">item-clicked</th>
          <td>事件</td>
          <td>-</td>
          <td>回调参数 (event) => void</td>
        </tr>
      </tbody>
    </table>
    <h4>DropdownItem 属性和事件</h4>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">属性或事件</th>
          <th scope="col">类型</th>
          <th scope="col">默认</th>
          <th scope="col">说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">disabled</th>
          <td>boolean</td>
          <td>false</td>
          <td>禁用 Dropdown Item</td>
        </tr>
        <tr>
          <th scope="row">closeAfterClick</th>
          <td>boolean</td>
          <td>false</td>
          <td>点击 Item 以后是否关闭菜单</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Dropdown from './../Dropdown.vue'
export default defineComponent({
  name: 'dropdown-details',
  components: {
    Dropdown
  },
  setup () {
    const html = `
       <dropdown title="你好 点击我试试">
        <dropdown-item closeAfterClick>
          <a href="#" class="dropdown-item">新建文章</a>
        </dropdown-item>
        <dropdown-item>
          <a href="#" class="dropdown-item">我的专栏</a>
        </dropdown-item>
        <dropdown-item>
          <a href="#" class="dropdown-item">编辑资料</a>
        </dropdown-item>
        <dropdown-item closeAfterClick>
          <a href="#" class="dropdown-item">退出登陆</a>
        </dropdown-item>
      </dropdown>
    `
    return {
      html
    }
  }
})
</script>

<style scoped>
pre {
  background-color: #fdf6e3;
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}
</style>
